<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords"/>
    <meta name="description"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="/css/layui-bq.css">
    <link rel="stylesheet" type="text/css" href="/css/aui.css"/>
</head>

<style type="text/css">
    body {
        padding: 0;
        margin: 0;
        color: #444;
        background: #f2f2f2;
    }

    * {
        padding: 0;
        margin: 0;
        border: 0;
        list-style: none;
        text-decoration: none;
    }

    .wrap {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .label-selected {
        width: 100%;
        min-height: 38px;
        margin: 10px 0;
        border: 1px solid #ccc;
        background-color: #fff;
        position: relative;
    }

    .cell {
        display: block;
        width: 90px;
        height: 28px;
        line-height: 28px;
        border: 3px;
        background: #009688;
        color: #fff;
        text-align: center;
    }

    .label-selected li {
        display: inline-block;
        height: 27px;
        line-height: 27px;
        font-size: .8rem;
        padding: 0 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        cursor: pointer;
        margin: 4px 2px;
        color: #666;
    }

    #labelItem {
        margin-bottom: 10px;
        display: none;
    }

    .label-item {
        border: 1px solid #e6e6e6;
        padding: 10px;
        border-radius: 0 2px 2px 0;
        position: relative;
        overflow: hidden;
        background: #fff;
    }

    .label-item li {
        display: inline-block;
        height: 27px;
        line-height: 27px;
        font-size: .8rem;
        padding: 0 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        cursor: pointer;
        margin-bottom: 5px;
        margin-left: 2px;
        color: #666;
    }

    .label-item .selected {
        color: #ccc;
    }

    p {
        margin-bottom: 0.5rem;
    }
</style>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left goblack" href="javascript:history.back(-1)">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">我的服务</div>
</header>
<form id="form">
    <div class="wrap">
        <div class="label-selected">
            <a href="javascript:;" class="layui-btn layui-btn-sm show-labelitem"
               style="float: right; margin: 4px; display: block;line-height: 30px;">展开全部服务</a>
            <a href="javascript:;" class="layui-btn layui-btn-sm hide-labelitem"
               style="float: right; margin: 4px; display: none;line-height: 30px;">收起服务 </a>
            <input type="hidden" name="merchantsBusinesspro" value="${InitBusin}">
            <input type="hidden" name="merchantsId" value="${Id}">

            <#if (MySer)??>
            <#list MySer as item>
            <li data="${item}">x ${item}</li>
        </
        #list>
    </
    #if>
    </div>
    <div class="layui-col-md12" id="labelItem">
        <!--标签库-->
        <div class="label-item">
            <a href="javascript:;" class="replacelable addbq"
               style="position: absolute;right:1rem;bottom:.75rem;color: #1994dc;font-size:20px;display:bolck;">+</a>
            <li data="洗车"><span>洗车</span></li>
            <li data="美容"><span>美容</span></li>
            <li data="装潢"><span>装潢</span></li>
            <li data="油漆"><span>油漆</span></li>
            <li data="维修"><span>维修</span></li>
            <li data="保养"><span>保养</span></li>
            <li data="救援"><span>救援</span></li>
            <li data="轮胎服务"><span>轮胎服务</span></li>
        </div>

        <div class="aui-content aui-margin-b-15 addshow" style="display:none">
            <ul class="aui-list aui-form-list">
                <div class="aui-content aui-margin-b-15">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label" style="font-size:12px;">
                                服务名称：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" class="name-input servicedata" placeholder="输入服务名"/>
                            </div>
                            <a href="javascript:;" class="layui-btn adddata" id="cell">添加</a>
                            <a href="javascript:;" class="layui-btn abort" id="cell" style="background-color: #b95869;">取消</a>
                        </div>
                    </li>
                </div>
            </ul>
        </div>

    </div>
    <p>
    <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined update">确认提交</div>
    </p>
    </div>
</form>


<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/js/layer-bq.js"></script>
<script type="text/javascript" src="/js/util/myservice.js"></script>
<script>
    $(".update").click(function () {
        var datas = $("#form").serialize();
        $.ajax({
            type: "POST",
            url: "UpBusinesspro",
            data: datas,
            success: function (data) {
                if (data) {
                    layer.alert("更新成功!", {
                        icon: 1,
                        yes: function (index, layero) {
                            location.href = "doindex";
                        }
                    })

                } else {
                    layer.alert("更新失败!", {
                        icon: 2,
                        yes: function (index, layero) {
                            location.href = "domyservice?phone=" +${Phone};
                        }
                    })
                }
            }, error: function (data) {
                layer.alert("操作异常!", {icon: 2})
            }

        })
    })
</script>

</body>
</html>
